<template>
  <div class="pages couponslist">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form size="small" label-width="70px">
          <el-form-item label="类型">
            <el-select v-model="selectdata.ticketType" placeholder="全部类型">
              <el-option label="全部类型" value></el-option>
              <el-option label="体验券" value="0"></el-option>
              <el-option label="满减券" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="selectdata.ticketState" placeholder="全部状态">
              <el-option label="全部状态" value></el-option>
              <el-option label="未过期" value="0"></el-option>
              <el-option label="已过期" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="20px">
            <el-input type="text" v-model="selectdata.ticketName" placeholder="优惠券标题"></el-input>
          </el-form-item>
          <el-form-item label label-width="20px">
            <el-button type="primary" @click="reset()">重置</el-button>
            <el-button type="primary" @click="searchSelect()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-form size="small" style="float:right;margin-right:100px">
          <el-form-item label label-width="0" v-if="setRole('新增')">
            <el-dropdown @command="handleCommand">
              <el-button type="primary">
                创建优惠券
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="routerPush">体验券</el-dropdown-item>
                <el-dropdown-item command="routerPushs">满减券</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        ref="multipleTable"
        :data="couponTable"
        size="medium"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="ticketName" width="150" fixed align="center" label="优惠券标题">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.ticketName"
              placement="top-start"
            >
              <div
                class="wrap_button btn_color"
                style="cursor:pointer"
                @click="cellClick(scope.row.id, scope.row.ticketType, scope.row.activity)"
              >{{scope.row.ticketName}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="ticketSubName" align="center" width="200" label="优惠券副标题"></el-table-column>
        <el-table-column align="center" width="100" label="优惠券类型">
          <template slot-scope="scope">
            <span>{{ scope.row.ticketType == 1 ? '满减券' : '体验券' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="activity"  width="200" align="center" label="关联活动"></el-table-column>
        <el-table-column prop="validDay" align="center" label="有效时间"></el-table-column>
        <el-table-column prop="ticketState" align="center" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.ticketState == 1 ? '已过期' : '未过期' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
        <el-table-column prop="creator" align="center" label="创建人"></el-table-column>
        <el-table-column prop="totalNumber" align="center" label="已发数量"></el-table-column>
        <el-table-column prop="alreadyUsed" align="center" width="100" label="已使用数量"></el-table-column>
        <el-table-column prop="notUsed" align="center" width="100" label="未使用数量"></el-table-column>
        <el-table-column align="center" width="200" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="setRole('新增')" :disabled="scope.row.selfCreate==undefined" @click="copy(scope.row.id,scope.row.ticketType,'copy')">复制</el-button>
            <el-button type="text" v-if="setRole('查看券使用明细')" :disabled="scope.row.selfCreate==undefined" @click="routerToDetails(scope.row.id,scope.row.ticketType)">券使用明细</el-button>
            <el-button
              type="text"
              :disabled="scope.row.activity.length>0"
              @click="deleteAccessUser(scope.row.id)"
              v-if="setRole('新增')"
            >删除</el-button>
            <el-button
              type="text"
              :disabled="scope.row.activity.length>0"
              @click="copy(scope.row.id,scope.row.ticketType,'edit')"
              v-if="setRole('新增')"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page-unit :pageData="pageData" :func="getcouponList"></page-unit>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "@/components/Page";
import util from "@/util";
import { findMarketTicketListPage, deleteMarketTicket } from "@/api";
export default {
  data() {
    return {
      active: false,
      couponTable: [],
      activity: "",
      selectdata: {
        ticketName: "",
        ticketType: "",
        ticketState: ""
      },
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  components: { pageUnit },
  computed: mapState(["merchantId", "sub","power"]),
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.pageData.currentPage=1
          this.getcouponList(this.pageData.pageSize,this.pageData.currentPage);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.pageData.currentPage=1
    this.getcouponList(this.pageData.pageSize,this.pageData.currentPage);
  },
  methods: {
     //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    handleCommand(command) {
      if (command == "routerPush") {
        this.routerPush();
      }
      if (command == "routerPushs") {
        this.routerPushs();
      }
    },
    cellClick(id, type, activity) {
      if (type == "1") {
        util.routerTo(
          "/marketing-center/company-active/coupon-list/fullreduction-details",
          {
            showTab: "1",
            id: id
          }
        );
      } else {
        util.routerTo(
          "/marketing-center/company-active/coupon-list/preference-details",
          {
            id: id,
            activity: activity
          }
        );
      }
    },
    cellClickss(id, type) {
      if (type == "1") {
        util.routerTo(
          "/marketing-center/company-active/coupon-list/fullreduction-details",
          {
            showTab: "3",
            id: id
          }
        );
      } else {
        util.routerTo(
          "/marketing-center/company-active/coupon-list/create-experience",
          {
            id: id
          }
        );
      }
    },
    establish() {
      this.active = !this.active;
    },
    routerPush() {
      util.routerTo(
        "/marketing-center/company-active/coupon-list/create-experience"
      );
      this.active = false;
    },
    routerPushs() {
      util.routerTo(
        "/marketing-center/company-active/coupon-list/fullreductiona-add"
      );
      this.active = false;
    },
    reset() {
      this.selectdata.ticketName = "";
      this.selectdata.ticketType = "";
      this.selectdata.ticketState = "";
    },
    searchSelect() {
      this.pageData.currentPage=1
      this.getcouponList(this.pageData.pageSize,this.pageData.currentPage);
    },
    //删除
    deleteAccessUser(id) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        let getdata = {
          id: id
        };
        deleteMarketTicket(getdata).then(res => {
          this.pageData.currentPage=1
          this.getcouponList(this.pageData.pageSize,this.pageData.currentPage);
        });
      });
    },
    //优惠券列表
    getcouponList(pageSize, pageNum) {
      let data = {
        orgId: this.merchantId,
        pageSize: pageSize,
        pageNo: pageNum,
        ticketName: this.selectdata.ticketName,
        ticketType: this.selectdata.ticketType,
        ticketState: this.selectdata.ticketState,
        ticketTypeList: "0,1"
      };
      findMarketTicketListPage(data).then(res => {
        this.couponTable = res.data.list;
        this.pageData.totalItems = res.data.totalPage;
      });
    },
    //跳转优惠券明细
    routerToDetails(id, type) {
      util.routerTo(
        "/marketing-center/company-active/coupon-list/coupon-details",
        {
          ticketId: id,
          type: type
        }
        /* 
        id:优惠券id
        type:优惠券类型,展示不同列
       */
      );
    },
    //复制
    copy(id,type,status) {
      if (type == "1") {
        //满减
        util.routerTo(
          "/marketing-center/company-active/coupon-list/fullreductiona-add",
          {
            id: id,
            status:status,
            type:status
          }
        );
      } else if (type == "0") {
        //体验
        util.routerTo(
          "/marketing-center/company-active/coupon-list/create-experience",
          {
            id: id,
            status:status,
            type:status
          }
        );
      }
    }
  }
};
</script>

<style scoped>
.tableSearch {
  position: relative;
}
.input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 33px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.mark {
  position: absolute;
  width: 150px;
  height: 60px;
  top: 50px;
  left: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-bottom: none;
}
.mark_p {
  width: 100%;
  height: 30px;
  margin: 0;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
.el-input__inner {
  height: 33px !important;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: red;
}
.wrap_button {
  /* word-wrap: break-word; */
  /* word-break: break-all; */
  /* overflow: hidden; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.btn_color {
  color: #409eff;
  font-weight: bold;
}
</style>
